<template>
  <div class="accounts-receivable">
    <div class="page-header">
      <h1>应收账款</h1>
      <div class="breadcrumb">财务管理 / 财务报表 / 应收账款</div>
    </div>

    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-title">总应收账款</div>
        <div class="stat-value">¥{{ formatCurrency(totalReceivable) }}</div>
        <div class="stat-change">+12.5%</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">逾期账款</div>
        <div class="stat-value">¥{{ formatCurrency(totalOverdue) }}</div>
        <div class="stat-change negative">+8.3%</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">本月回款</div>
        <div class="stat-value">¥{{ formatCurrency(totalCollected) }}</div>
        <div class="stat-change">+15.2%</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">客户数量</div>
        <div class="stat-value">{{ customerCount }}</div>
        <div class="stat-change">+3</div>
      </div>
    </div>

    <!-- 搜索筛选区域 -->
    <div class="search-action-section">
      <div class="search-form">
        <div class="form-item">
          <label>客户名称</label>
          <input v-model="searchForm.customerName" type="text" placeholder="请输入客户名称" />
        </div>
        <div class="form-item">
          <label>逾期状态</label>
          <select v-model="searchForm.overdueStatus">
            <option value="">全部</option>
            <option value="0">正常</option>
            <option value="1">逾期</option>
          </select>
        </div>

        <div class="form-item">
          <label>到期日期</label>
          <input v-model="searchForm.dueDate" type="date" />
        </div>
        <div class="form-buttons">
          <button class="btn btn-primary" @click="searchAccounts">查询</button>
          <button class="btn btn-secondary" @click="resetSearch">重置</button>
        </div>
      </div>
    </div>

    <!-- 应收账款列表和分页 -->
    <div class="table-pagination-section">
      <!-- 表格操作区域 -->
      <div class="table-actions">
        <div class="batch-actions">
          <label class="checkbox-label">
            <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" />
            <span>全选</span>
          </label>
          <button class="btn btn-success" @click="confirmExportSelected" :disabled="!hasSelectedAccounts">
            <span class="btn-icon">📊</span>
            导出选中数据
          </button>
          <button class="btn btn-info export-all-btn" @click="confirmExportAll">
            <span class="btn-icon">📥</span>
            导出全部数据
          </button>
        </div>
      </div>

      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" /></th>
              <th>客户名称</th>
              <th>订单编号</th>
              <th>发票金额</th>
              <th>已收金额</th>
              <th>未收金额</th>
              <th>到期日期</th>
              <th>逾期天数</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="account in accountList" :key="account.id" :class="{ 'selected-row': account.selected }" @click="toggleRowSelect(account, $event)">
              <td><input type="checkbox" v-model="account.selected" @click.stop /></td>
              <td>{{ account.customerName }}</td>
              <td>{{ account.orderCode || '-' }}</td>
              <td>¥{{ formatCurrency(account.invoiceAmount) }}</td>
              <td>¥{{ formatCurrency(account.receivedAmount) }}</td>
              <td>¥{{ formatCurrency(account.outstandingAmount) }}</td>
              <td>{{ formatDate(account.dueDate) }}</td>
              <td>
                <span v-if="account.overdueDays > 0" class="overdue-days">
                  {{ account.overdueDays }}天
                </span>
                <span v-else>-</span>
              </td>
              <td>
                <span :class="getStatusClass(account)">
                  {{ getStatusText(account) }}
                </span>
              </td>
              <td>
                              <button class="btn btn-small btn-primary" @click="viewDetail(account)">查看</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <div class="pagination-info">共{{ totalPages }}页/{{ totalItems }}条数据</div>
        <div class="pagination-controls">
          <button class="btn btn-page" :disabled="currentPage === 1" @click="changePage(currentPage - 1)">上一页</button>
          <button v-for="page in visiblePages" :key="page" class="btn btn-page" :class="{ active: page === currentPage }" @click="changePage(page)">{{ page }}</button>
          <button class="btn btn-page" :disabled="currentPage === totalPages" @click="changePage(currentPage + 1)">下一页</button>
        </div>
      </div>
    </div>



    <!-- 导出确认对话框 -->
    <div v-if="showExportModal" class="modal-overlay" @click="closeExportModal">
      <div class="modal-content export-modal" @click.stop>
        <div class="modal-header">
          <h3>{{ exportModalTitle }}</h3>
          <button class="modal-close" @click="closeExportModal">&times;</button>
        </div>
        <div class="modal-body">
          <p>{{ exportModalMessage }}</p>

          <!-- 列选择区域 -->
          <div class="column-selection">
            <p><strong>选择要导出的列：</strong></p>
            <div class="column-grid">
              <label class="column-checkbox" v-for="column in availableColumns" :key="column.key">
                <input type="checkbox" v-model="column.selected" />
                <span>{{ column.label }}</span>
              </label>
            </div>
          </div>

          <div class="export-info">
            <p><strong>导出内容预览：</strong></p>
            <ul>
              <li v-for="column in selectedColumns" :key="column.key">{{ column.label }}</li>
            </ul>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="closeExportModal">取消</button>
          <button class="btn btn-primary" @click="confirmExport">确认导出</button>
        </div>
      </div>
    </div>

    <!-- 查看详情模态框 -->
    <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>应收账款详情</h3>
          <button class="close-btn" @click="closeDetailModal">&times;</button>
        </div>
        <div class="modal-body" v-if="selectedAccount">
          <div class="detail-grid">
            <div class="detail-item">
              <label>应收账款编号:</label>
              <span>{{ selectedAccount.receivableCode }}</span>
            </div>
            <div class="detail-item">
              <label>客户名称:</label>
              <span>{{ selectedAccount.customerName }}</span>
            </div>
            <div class="detail-item">
              <label>订单编号:</label>
              <span>{{ selectedAccount.orderCode || '-' }}</span>
            </div>
            <div class="detail-item">
              <label>订单类型:</label>
              <span>{{ getOrderTypeText(selectedAccount.orderType) }}</span>
            </div>
            <div class="detail-item">
              <label>发票编号:</label>
              <span>{{ selectedAccount.invoiceCode || '-' }}</span>
            </div>
            <div class="detail-item">
              <label>发票金额:</label>
              <span class="amount">¥{{ formatCurrency(selectedAccount.invoiceAmount) }}</span>
            </div>
            <div class="detail-item">
              <label>已收金额:</label>
              <span class="amount">¥{{ formatCurrency(selectedAccount.receivedAmount) }}</span>
            </div>
            <div class="detail-item">
              <label>未收金额:</label>
              <span class="amount outstanding">¥{{ formatCurrency(selectedAccount.outstandingAmount) }}</span>
            </div>
            <div class="detail-item">
              <label>到期日期:</label>
              <span>{{ formatDate(selectedAccount.dueDate) }}</span>
            </div>
            <div class="detail-item">
              <label>逾期天数:</label>
              <span :class="selectedAccount.overdueDays > 0 ? 'overdue' : ''">
                {{ selectedAccount.overdueDays > 0 ? selectedAccount.overdueDays + '天' : '-' }}
              </span>
            </div>
            <div class="detail-item">
              <label>业务员:</label>
              <span>{{ selectedAccount.salesPerson || '-' }}</span>
            </div>
            <div class="detail-item">
              <label>联系电话:</label>
              <span>{{ selectedAccount.contactPhone || '-' }}</span>
            </div>
            <div class="detail-item">
              <label>备注:</label>
              <span>{{ selectedAccount.remark || '-' }}</span>
            </div>
            <div class="detail-item">
              <label>创建时间:</label>
              <span>{{ formatDateTime(selectedAccount.createTime) }}</span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" @click="closeDetailModal">关闭</button>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { apiGet } from '../../utils/api.js'
import * as XLSX from 'xlsx'

const searchForm = reactive({
  customerName: '',
  overdueStatus: '',
  dueDate: ''
})

const accountList = ref([])
const currentPage = ref(1)
const totalPages = ref(1)
const totalItems = ref(0)
const totalReceivable = ref(0)
const totalOverdue = ref(0)
const totalCollected = ref(0)
const customerCount = ref(0)

// 选择状态
const selectAll = ref(false)

// 模态框状态
const showDetailModal = ref(false)
const selectedAccount = ref(null)

// 导出确认模态框状态
const showExportModal = ref(false)
const exportModalTitle = ref('')
const exportModalMessage = ref('')
const exportAction = ref(null)

// 可选择的列配置
const availableColumns = ref([
  { key: 'customerName', label: '客户名称', selected: true },
  { key: 'orderCode', label: '订单编号', selected: true },
  { key: 'invoiceAmount', label: '发票金额', selected: true },
  { key: 'receivedAmount', label: '已收金额', selected: true },
  { key: 'outstandingAmount', label: '未收金额', selected: true },
  { key: 'dueDate', label: '到期日期', selected: true },
  { key: 'overdueDays', label: '逾期天数', selected: true },
  { key: 'status', label: '状态', selected: true },
  { key: 'salesPerson', label: '业务员', selected: true },
  { key: 'contactPhone', label: '联系电话', selected: true },
  { key: 'remark', label: '备注', selected: true }
])

// 计算选中的列
const selectedColumns = computed(() => {
  return availableColumns.value.filter(column => column.selected)
})



const visiblePages = computed(() => {
  const pages = []
  const start = Math.max(1, currentPage.value - 2)
  const end = Math.min(totalPages.value, currentPage.value + 2)
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  return pages
})

const hasSelectedAccounts = computed(() => {
  return accountList.value.some(account => account.selected)
})

const selectedAccounts = computed(() => {
  return accountList.value.filter(account => account.selected)
})

const searchAccounts = async () => {
  currentPage.value = 1
  await loadAccountData()
}

const resetSearch = async () => {
  searchForm.customerName = ''
  searchForm.overdueStatus = ''
  searchForm.collectionStatus = ''
  searchForm.dueDate = ''
  currentPage.value = 1
  await loadAccountData()
}

const changePage = async (page) => {
  currentPage.value = page
  await loadAccountData()
}

const getStatusClass = (account) => {
  if (account.overdueStatus === 1) return 'status-overdue'
  if (account.collectionStatus === 2) return 'status-paid'
  if (account.collectionStatus === 1) return 'status-partial'
  return 'status-normal'
}

const getStatusText = (account) => {
  if (account.overdueStatus === 1) return '逾期'
  if (account.collectionStatus === 2) return '已收款'
  if (account.collectionStatus === 1) return '部分收款'
  return '正常'
}

const getOrderTypeText = (orderType) => {
  const typeMap = {
    'SALES': '销售单',
    'PURCHASE_RETURN': '采购退货单'
  }
  return typeMap[orderType] || orderType
}

const formatCurrency = (amount) => {
  if (!amount) return '0.00'
  return parseFloat(amount).toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleDateString('zh-CN')
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}

const viewDetail = (account) => {
  selectedAccount.value = account
  showDetailModal.value = true
}

const closeDetailModal = () => {
  showDetailModal.value = false
  selectedAccount.value = null
}

const toggleSelectAll = () => {
  accountList.value.forEach(account => {
    account.selected = selectAll.value
  })
}

const toggleRowSelect = (account, event) => {
  const target = event?.target
  if (!target) {
    account.selected = !account.selected
    return
  }
  const tag = target.tagName?.toLowerCase()
  if (tag === 'input' || tag === 'button' || tag === 'a') return
  if (target.closest && target.closest('button')) return
  account.selected = !account.selected
}

const confirmExportSelected = () => {
  if (selectedAccounts.value.length === 0) {
    alert('请先选择要导出的数据')
    return
  }
  exportModalTitle.value = '导出选中数据'
  exportModalMessage.value = `确定要导出选中的 ${selectedAccounts.value.length} 条数据吗？`
  exportAction.value = () => exportToExcel(selectedAccounts.value, '应收账款-选中数据')
  showExportModal.value = true
}

const confirmExportAll = () => {
  exportModalTitle.value = '导出全部数据'
  exportModalMessage.value = `确定要导出当前页面的 ${accountList.value.length} 条数据吗？`
  exportAction.value = () => exportToExcel(accountList.value, '应收账款-全部数据')
  showExportModal.value = true
}

const closeExportModal = () => {
  showExportModal.value = false
  exportModalTitle.value = ''
  exportModalMessage.value = ''
  exportAction.value = null
}

const confirmExport = () => {
  if (exportAction.value) {
    exportAction.value()
    closeExportModal()
  }
}

const exportToExcel = (data, filename) => {
  try {
    // 检查是否有选中的列
    if (selectedColumns.value.length === 0) {
      alert('请至少选择一列进行导出')
      return
    }

    // 准备表头
    const headers = selectedColumns.value.map(column => column.label)

    // 准备数据行
    const rows = data.map(account => {
      const row = []
      selectedColumns.value.forEach(column => {
        switch (column.key) {
          case 'customerName':
            row.push(account.customerName || '')
            break
          case 'orderCode':
            row.push(account.orderCode || '')
            break
          case 'invoiceAmount':
            row.push(formatCurrency(account.invoiceAmount))
            break
          case 'receivedAmount':
            row.push(formatCurrency(account.receivedAmount))
            break
          case 'outstandingAmount':
            row.push(formatCurrency(account.outstandingAmount))
            break
          case 'dueDate':
            row.push(formatDate(account.dueDate))
            break
          case 'overdueDays':
            row.push(account.overdueDays > 0 ? `${account.overdueDays}天` : '')
            break
          case 'status':
            row.push(getStatusText(account))
            break
          case 'salesPerson':
            row.push(account.salesPerson || '')
            break
          case 'contactPhone':
            row.push(account.contactPhone || '')
            break
          case 'remark':
            row.push(account.remark || '')
            break
          default:
            row.push('')
        }
      })
      return row
    })

    // 创建工作簿
    const workbook = XLSX.utils.book_new()

    // 创建工作表
    const worksheet = XLSX.utils.aoa_to_sheet([headers, ...rows])

    // 设置列宽
    const columnWidths = selectedColumns.value.map(column => {
      switch (column.key) {
        case 'customerName':
        case 'orderCode':
        case 'salesPerson':
        case 'contactPhone':
          return { wch: 15 }
        case 'invoiceAmount':
        case 'receivedAmount':
        case 'outstandingAmount':
        case 'dueDate':
          return { wch: 12 }
        case 'overdueDays':
        case 'status':
          return { wch: 10 }
        case 'remark':
          return { wch: 20 }
        default:
          return { wch: 12 }
      }
    })
    worksheet['!cols'] = columnWidths

    // 添加工作表到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, '应收账款')

    // 导出文件
    XLSX.writeFile(workbook, `${filename}_${new Date().toISOString().split('T')[0]}.xlsx`)

    alert('导出成功！')
  } catch (error) {
    console.error('导出失败:', error)
    alert('导出失败: ' + error.message)
  }
}







const loadAccountData = async () => {
  try {
    const params = new URLSearchParams({
      page: currentPage.value,
      size: 10,
      ...(searchForm.customerName && { customerName: searchForm.customerName }),
      ...(searchForm.overdueStatus && { overdueStatus: searchForm.overdueStatus }),
      ...(searchForm.collectionStatus && { collectionStatus: searchForm.collectionStatus }),
      ...(searchForm.dueDate && { dueDate: searchForm.dueDate })
    })

    const data = await apiGet(`/finance/accounts-receivable?${params}`)

    if (data.content) {
      accountList.value = data.content.map(account => ({ ...account, selected: false }))
      totalPages.value = data.totalPages
      totalItems.value = data.totalElements
    } else {
      accountList.value = data.map(account => ({ ...account, selected: false }))
      totalPages.value = data.totalPages || 1
      totalItems.value = data.totalElements || data.length
    }

    // 计算统计数据
    calculateStats()

  } catch (error) {
    console.error('加载应收账款时出错:', error)
    // 使用模拟数据
    accountList.value = generateMockData()
    calculateStats()
  }
}

const calculateStats = () => {
  totalReceivable.value = accountList.value.reduce((sum, account) => sum + parseFloat(account.invoiceAmount || 0), 0)
  totalOverdue.value = accountList.value.reduce((sum, account) => {
    return sum + (account.overdueStatus === 1 ? parseFloat(account.outstandingAmount || 0) : 0)
  }, 0)
  totalCollected.value = accountList.value.reduce((sum, account) => sum + parseFloat(account.receivedAmount || 0), 0)
  customerCount.value = new Set(accountList.value.map(account => account.customerId)).size
}

const generateMockData = () => {
  return [
    {
      id: 1,
      receivableCode: 'AR202408001',
      customerId: 1,
      customerName: '上海华信贸易有限公司',
      orderId: 1,
      orderCode: 'SO202408001',
      orderType: 'SALES',
      invoiceCode: 'INV202408001',
      invoiceAmount: 35600.00,
      receivedAmount: 35600.00,
      outstandingAmount: 0.00,
      dueDate: '2024-08-05',
      overdueDays: 0,
      overdueStatus: 0,
      collectionStatus: 2,
      salesPerson: '张三',
      contactPhone: '13800138000',
      remark: '销售订单收款',
      createTime: '2024-08-01 10:00:00',
      selected: false
    },
    {
      id: 2,
      receivableCode: 'AR202408002',
      customerId: 1,
      customerName: '上海华信贸易有限公司',
      orderId: 2,
      orderCode: 'SO202408002',
      orderType: 'SALES',
      invoiceCode: 'INV202408002',
      invoiceAmount: 30000.00,
      receivedAmount: 25000.00,
      outstandingAmount: 5000.00,
      dueDate: '2024-08-15',
      overdueDays: 0,
      overdueStatus: 0,
      collectionStatus: 1,
      salesPerson: '张三',
      contactPhone: '13800138000',
      remark: '部分收款',
      createTime: '2024-08-02 10:00:00',
      selected: false
    },
    {
      id: 3,
      receivableCode: 'AR202408003',
      customerId: 2,
      customerName: '北京中科信息技术股份有限公司',
      orderId: 3,
      orderCode: 'SO202408003',
      orderType: 'SALES',
      invoiceCode: 'INV202408003',
      invoiceAmount: 22500.00,
      receivedAmount: 0.00,
      outstandingAmount: 22500.00,
      dueDate: '2024-08-01',
      overdueDays: 5,
      overdueStatus: 1,
      collectionStatus: 0,
      salesPerson: '李四',
      contactPhone: '13900139000',
      remark: '逾期未收款',
      createTime: '2024-08-03 10:00:00',
      selected: false
    },
    {
      id: 4,
      receivableCode: 'AR202408004',
      customerId: 3,
      customerName: '深圳市盛达电子有限公司',
      orderId: 4,
      orderCode: 'PR202408001',
      orderType: 'PURCHASE_RETURN',
      invoiceCode: 'INV202408004',
      invoiceAmount: 15000.00,
      receivedAmount: 0.00,
      outstandingAmount: 15000.00,
      dueDate: '2024-08-10',
      overdueDays: 0,
      overdueStatus: 0,
      collectionStatus: 0,
      salesPerson: '王五',
      contactPhone: '13700137000',
      remark: '采购退货应收',
      createTime: '2024-08-04 10:00:00',
      selected: false
    }
  ]
}

onMounted(() => {
  loadAccountData()
})
</script>

<style scoped>
.accounts-receivable {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin: 20px;
}

.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f2f5;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
  color: #1a202c;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.breadcrumb {
  color: #718096;
  font-size: 14px;
  font-weight: 500;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.breadcrumb {
  color: #666;
  font-size: 14px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  color: #1a202c;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.stat-title {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.stat-change {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-change.negative {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.search-action-section {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.search-form {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.search-form .form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}

.table-actions {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 16px 24px;
  border-radius: 12px 12px 0 0;
  border: 1px solid #e2e8f0;
  border-bottom: none;
  margin-bottom: 0;
}

.batch-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.export-all-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
}

.export-all-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
}

.export-modal .modal-content {
  max-width: 500px;
}

.export-info {
  background: #f8fafc;
  padding: 16px;
  border-radius: 8px;
  margin-top: 16px;
}

.export-info ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.export-info li {
  margin: 4px 0;
  color: #4b5563;
}

.column-selection {
  margin: 20px 0;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.column-selection p {
  margin: 0 0 12px 0;
  font-weight: 600;
  color: #374151;
}

.column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.column-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.column-checkbox:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.column-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.column-checkbox span {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.search-form .form-item label {
  font-weight: 600;
  color: #374151;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-form .form-item input,
.search-form .form-item select {
  padding: 10px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

.search-form .form-item input:focus,
.search-form .form-item select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

.search-form .form-item input:hover,
.search-form .form-item select:hover {
  border-color: #d1d5db;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item label {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.form-item input,
.form-item select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 150px;
}

.form-buttons {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.form-buttons .btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 80px;
}

.form-buttons .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.form-buttons .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.form-buttons .btn-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
}

.form-buttons .btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 117, 125, 0.6);
}

.table-pagination-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.table-container {
  overflow-x: auto;
  margin-bottom: 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: white;
}

.data-table th,
.data-table td {
  padding: 16px 12px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.data-table th {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  font-weight: 700;
  color: #374151;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e2e8f0;
}

.data-table tbody tr {
  transition: all 0.2s ease;
}

.data-table tbody tr:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.data-table tbody tr.selected-row {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.08) 0%, rgba(32, 201, 151, 0.08) 100%);
  border-left: 4px solid #20c997;
  box-shadow: inset 0 0 0 1px rgba(32, 201, 151, 0.25);
}

.status-normal {
  color: #10b981;
  font-weight: 600;
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid #10b981;
}

.status-overdue {
  color: #ef4444;
  font-weight: 600;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid #ef4444;
}

.status-partial {
  color: #ffc107;
  font-weight: 500;
}

.status-paid {
  color: #6c757d;
  font-weight: 500;
}

.overdue-days {
  color: #ef4444;
  font-weight: 700;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  padding: 4px 8px;
  border-radius: 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid #ef4444;
  display: inline-block;
}

.text-muted {
  color: #6c757d;
  font-size: 12px;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
}

.pagination-info {
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
}

.pagination-controls {
  display: flex;
  gap: 8px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #545b62;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-success:hover {
  background: #218838;
}

.btn-page {
  background: white;
  border: 2px solid #e5e7eb;
  color: #374151;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
  min-width: 40px;
}

.btn-page:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.btn-page.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-small {
  padding: 6px 12px;
  font-size: 12px;
  margin-right: 5px;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-small.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-small.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}



/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid #e2e8f0;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.modal-header h3 {
  margin: 0;
  color: white;
  font-weight: 700;
}

.modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: white;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  font-weight: 600;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.modal-body {
  padding: 24px;
  background: #fafbfc;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 详情模态框样式 */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item label {
  font-weight: 600;
  color: #374151;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-item span {
  color: #1f2937;
  font-size: 16px;
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

.detail-item .amount {
  font-weight: 600;
  color: #28a745;
}

.detail-item .amount.outstanding {
  color: #dc3545;
}

.detail-item .overdue {
  color: #dc3545;
  font-weight: 600;
}



/* 响应式设计 */
@media (max-width: 768px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .form-item {
    min-width: auto;
  }

  .modal-content {
    width: 95%;
    margin: 10px;
  }
}
</style>
